import { LitElement, html, css, nothing } from 'lit';
import 'card-ui';
import { stylesString } from './styles.js';

export class KpXyzEpisode extends LitElement {
  static styles = [
    css([stylesString])
  ];

  static properties = {
    preview: { type: Boolean },
    title: { type: String },
    url: { type: String },
    image: { type: String },
    description: { type: String },
    extra: { type: Object },
    datePublished: { type: String, attribute: 'date-published' },
  }

  constructor() {
    super();
    this.preview = false;
    this.title = '';
    this.url = '';
    this.image = '';
    this.description = '';
    this.extra = null;
    this.datePublished = null;
  }

  render() {
    return html`
      <div>
        <header>
          <div class="cover">
            <kpc-picture class="cover-img" width="125px" height="125px" src="${this.image}" href="${this.url}" ?preview="${this.preview}"></kpc-picture>
            ${(this.extra?.avatar && this.extra?.showCover) ? html`<kpc-avatar class="avatar" variant="rounded" size="33px" src="${this.extra?.avatar}" href="${this.extra?.authorUrl}" ?preview="${this.preview}"></kpc-avatar>` : nothing}
          </div>
          <kpc-link class="title" href="${this.url}" ?preview="${this.preview}" variant="title" color="primary">${this.title}</kpc-link>
          <kpc-link class="author" href="${this.extra?.authorUrl}" ?preview="${this.preview}" variant="body1" color=${this.extra?.theme || 'primary'}>${this.extra.author}</kpc-link>
          <div class="info">
            <kpc-typography variant="body2" color="secondary" class="duration">${this.extra.duration?.replace(/PT/, '').replace(/M/, '分钟')}</kpc-typography>
            <kpc-typography variant="body2" color="secondary" class="dot">·</kpc-typography>
            <kpc-time variant="body2" color="secondary" datetime="${new Date(this.datePublished).getTime()}" diff></kpc-time>
          </div>
        </header>
        ${this.description && html`<kpc-typography>${this.description}</kpc-typography>`}
      </div>
    `;
  }
}

window.customElements.define('TAG_NAME', KpXyzEpisode);
